<template>
    <div>
        <van-nav-bar class="navBar" title="月租审核" left-text="返回" left-arrow @click-left="onClickLeft" fixed/>
        <div class="mainWrap fixedMain">
            <el-form ref="form" :model="examineForm" label-width="80px" size="mini" class="formWrap">
                <el-form-item label="用户姓名">
                    <el-input v-model="examineForm.userName" disabled></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="examineForm.phone" disabled></el-input>
                </el-form-item>
                <el-form-item label="车牌号">
                    <el-input v-model="examineForm.carNum" disabled></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="examineForm.userAddress" disabled></el-input>
                </el-form-item>
                <el-form-item label-width="0" style="margin-bottom:0" v-for="(item,index) in parkInfoList" :key="index">
                    <el-form-item label="车场">
                        <!-- <el-input v-model="examineForm.carParkName" disabled></el-input> -->
                        <el-checkbox v-model="checkedGroup[index]" @change="((val)=>chkChange(val,index))">{{item.name}}</el-checkbox>
                    </el-form-item>
                    <el-form-item label="收费标准">
                        <el-select v-model="freeIds[index]" placeholder="请选择收费标准" class="fullWidth" :disabled="!checkedGroup[index]" @change="(val)=>freeChange(val,index)">
                            <el-option :label="item.name" :value="item.id" v-for="(item,index) in feesList" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="部门">
                    <el-select v-model="examineForm.groupId" placeholder="请选择部门" class="fullWidth">
                        <el-option :label="item.name" :value="item.id" v-for="(item,index) in groupList" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="车辆类型">
                    <el-select v-model="examineForm.carTyme" placeholder="请选择车辆类型" class="fullWidth">
                        <el-option label="月租车" :value="1"></el-option>
                        <el-option label="储值车" :value="2"></el-option>
                        <el-option label="免费车" :value="3"></el-option>
                        <el-option label="临时车" :value="4"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="月卡套餐">
                    <el-checkbox-group v-model="examineForm.packIds">
                        <el-checkbox :label="item.id" name="type" v-for="(item,index) in packageList" :key="index">{{item.name}}</el-checkbox>
                        <!-- <el-checkbox label="地推活动" name="type"></el-checkbox>
                        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> -->
                    </el-checkbox-group>
                </el-form-item>
                
                <el-form-item label="开始时间">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期" 
                        v-model="examineForm.startTime" class="fullWidth">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择日期" 
                        v-model="examineForm.endTime" class="fullWidth">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-image :src="examineForm.imgUrl" :fit="fit"  class="fullWidth"></el-image>
                </el-form-item>
                <el-form-item size="mini">
                    <el-button type="primary" @click="onSubmit">通过</el-button>
                    <el-button type="danger" @click="onRefuse">拒绝</el-button>
                </el-form-item>
            </el-form>
            <el-dialog class="dialog"
                title="拒绝"
                :visible.sync="confirmdialog"
                :before-close="changeAsyncCancle"
                width="90%">
                <div class="content">
                    <el-input v-model="params.remark" placeholder="请输入拒绝理由"  type="textarea"  row="6"></el-input>
                </div>
                <span slot="footer" class="dialog-footer" center>
                    <el-button type="primary" @click="changeAsyncOK('form')" size="mini">确 定</el-button>
                    <el-button @click="changeAsyncCancle('form')" size="mini">取消</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import { mapGetters } from "vuex"
import {timeFormate} from '@/utils'
export default {
    data(){
        return {
            depId:"",
            carParkName:"",
            info:{},
            feesList:[],
            packageList:[],
            groupList:[],
            parkInfoList:[],
            arrList:[],
            checkedGroup:[],
            parkIds:[],
            freeIds:[],
            examineForm:{
                applyId:"",
                userName:"",
                phone:"",
                carNum:"",
                carParkName:"",
                userAddress:"",
                groupId:"",
                carTyme:"",
                packIds:[],
                parkId:'',
                startTime:timeFormate(new Date()),
                endTime:timeFormate(new Date()),
                imgUrl:"",
                status:2
            },
            params:{
                applyId:"",
                carTyme:"",
                freeId:"",
                groupId:"",
                packIds:"",
                startTime:"",
                endTime:"",
                remark:"",
                status:2,  //审核意见:2通过，3拒绝  
            },
            confirmdialog:false
        }
    },
    computed: {
        ...mapGetters(['carParkInfo'])
    },
    created(){
        this.depId = this.carParkInfo.depId||sessionStorage.getItem('depId')
        this.carParkName = this.carParkInfo.name||sessionStorage.getItem('carParkInfo').name
        this.info = this.$route.query.row
        console.log(this.info,'this.info')
        this.parkInfoList = this.info.parkInfoList||[]
        this.examineForm.applyId = this.info.id
        this.examineForm.userName = this.info.userName
        this.examineForm.phone = this.info.phone
        this.examineForm.carNum = this.info.carNum
        this.examineForm.carParkName = this.carParkInfo.name||sessionStorage.getItem('carParkInfo').name
        this.examineForm.userAddress = this.info.userAddress
        this.examineForm.imgUrl = this.info.imgUrl
        this.initData()
    },
    methods:{
        //返回
        onClickLeft(){
            this.$router.go(-1)
        },
        async initData(){
            const toast = this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中..."
            });
            this.parkInfoList.map((o,i)=>{
                return this.checkedGroup.push(false)
            })
            console.log(this.checkedGroup,'this.checkedGroup')
            let params = {
                depId:this.depId
            }
            await this.$api.home.getZybFeesList(params).then(res=>{
                if(res.code == 200){
                    this.feesList = res.result.records                   
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.loading = false;
            });
            await this.$api.home.getPackageList(params).then(res=>{
                if(res.code == 200){
                    this.packageList = res.result.records                 
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.loading = false;
            });

            let parm = {
                depId:this.carParkInfo.depId||sessionStorage.getItem('depId'),
            }
            await this.$api.home.getGroupList(parm).then(res=>{
                this.$toast.clear();
                if(res.code == 200){
                    this.arrList = [];
                    this.groupList = this.readNodes(JSON.parse(JSON.stringify(res.result)))
                    console.log(this.groupList,'groupList')                 
                }else{
                    this.$toast(res.message);
                }
            }).catch((res) => {
                this.$toast.clear();
                this.loading = false;
            });
        },
        chkChange(val,index){
            if(val){
                this.parkIds.push(this.parkInfoList[index].id)
            }else{
                this.parkIds.splice(this.parkIds.findIndex(e => e === this.parkInfoList[index].id), 1)
                this.freeIds.splice(index,1)
            }
            console.log(this.parkIds,'this.parkIds')
            console.log(this.freeIds,'this.freeIds')
        },
        freeChange(val,index){
            //this.freeIds.push(val)
            console.log(this.freeIds,'this.freeIds')
        },
        readNodes (treeData) {
            let obj = {
                id:"",
                name:""
            }
            for (let item of treeData) {
                obj = {
                    id:item.id,
                    name:item.name
                }
                this.arrList.push(obj)
                if (item.childList && item.childList.length) {
                    this.readNodes(item.childList)
                }
            }
            return this.arrList
        },
        onSubmit(){
            for (let index = 0; index < this.checkedGroup.length; index++) {
                const element = this.checkedGroup[index];
                if(!element){
                    this.$message.error('请选择车场');
                    return false
                }
                const item = this.freeIds[index];
                //debugger
                if(!item){
                    this.$message.error('请选择收费标准');
                    return false
                }
            }
            if(this.examineForm.groupId=='') return this.$message.error('请选择部门');
            if(this.examineForm.carTyme=='') return this.$message.error('请选择车辆类型');
            if(this.examineForm.packIds=='') return this.$message.error('请选择月卡套餐');
            if(this.examineForm.startTime=='') return this.$message.error('请选择开始时间');
            if(this.examineForm.endTime=='') return this.$message.error('请选择结束时间');
                    
            this.examineForm.parkId = this.parkIds.map((o,i)=>{return o+"#"+this.freeIds[i]})
            console.log(this.examineForm,"examineForm")
            const toast = this.$toast.loading({
                duration: 0, // 持续展示 toast
                forbidClick: true,
                message: "加载中..."
            });
            let formData = new FormData()
                formData.append("applyId",this.examineForm.applyId)
                formData.append("carTyme",this.examineForm.carTyme)
                formData.append("parkId",this.examineForm.parkId.join(','))
                formData.append("groupId",this.examineForm.groupId)
                formData.append("packIds",this.examineForm.packIds.join(','))
                formData.append("startTime",this.examineForm.startTime)
                formData.append("endTime",this.examineForm.endTime)
                formData.append("status",this.examineForm.status)
                formData.append("addOneOwner",false)
                //debugger
            this.$api.home.reviewerMonthCar(formData).then(res=>{
                this.$toast.clear();
                this.$router.go(-1);
                /* this.$dialog.confirm({
                    message: res.message,
                })
                .then(() => {
                    // on confirm
                    let formData = new FormData()
                        formData.append("applyId",this.examineForm.applyId)
                        formData.append("carTyme",this.examineForm.carTyme)
                        formData.append("freeId",this.examineForm.freeId)
                        formData.append("groupId",this.examineForm.groupId)
                        formData.append("packIds",this.examineForm.packIds.join(','))
                        formData.append("startTime",this.examineForm.startTime)
                        formData.append("endTime",this.examineForm.endTime)
                        formData.append("status",this.examineForm.status)
                        formData.append("addOneOwner",true)
                    this.$api.home.reviewerMonthCar(formData).then(res=>{
                        //debugger
                        if(res.code == 200){
                            this.$router.go(-1)
                            this.$toast(res.message);               
                        }else{
                            this.$toast(res.message);
                        }
                    }).catch((res) => {

                    });
                })
                .catch(() => {
                    // on cancel
                    this.$toast("已取消");
                }); */
            }).catch((res) => {
                this.$toast.clear();
            });
        },
        onRefuse(){
            this.confirmdialog = true
        },
        changeAsyncOK(){
            console.log(this.examineForm,"examineForm")
            if(this.params.remark==""){
                this.$message.error("请输入拒绝的理由");
                return
            }
            let formData = new FormData()
                formData.append("applyId",this.examineForm.applyId)
                formData.append("remark",this.params.remark)
                formData.append("status",3)
                //debugger
            this.$api.home.reviewerMonthCar(formData).then(res=>{
                this.onClickLeft()
            })
        },
        changeAsyncCancle(){
            this.confirmdialog = false
            this.params.remark = ""
        }
    }
}
</script>
<style lang="less" scoped>
    body{
        #app{
            height:auto;
            .child-view{
                display: inline-block;
                width: 100%;
                .mainWrap{
                    margin-bottom: 0;
                    background-color: #f2f2f2;
                }
            }
        }
    }
    
    .formWrap{
        display: inline-block;
        width: calc(100% - .6rem);
        margin: 0.3rem;
        padding: .3rem .2rem;
        background-color: #fff;
        border-radius: .1rem;
        box-sizing: border-box;
        .fullWidth{
            width: 100%;
        }
    }
</style>